<template>
    <view class="gjl-components">
        <view class="inner">
            <view class="left">
                <image :src="item.booksHead" mode=""></image>
            </view>
            <view class="right">
                <view class="name cl1">
                    {{item.booksName}}
                </view>
                <view class="tag-box">
                    <view class="tag-li" v-for="(item2,index2) in item.labelNames" :key="index2">
                        {{item2}}
                    </view>
                </view>
                <view class="author">
                    {{item.authorName}}
                </view>
                <view class="btn-box">
                    <view class="btn" @click.stop="btnClick">
                        加入书屋
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            item:{
                type: Object,
                default: function(){
                    return {}
                }
            }
        },
        methods:{
            btnClick(){
                this.$emit('btnClick',this.item)
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-components{
        .inner{
            display: flex;
            align-items: center;
            .left{
                display: flex;
                image{
                    width:280rpx;
                    height:210rpx;
                    background:rgba(220,220,220,1);
                    border-radius:4rpx;
                }
            }
            .right{
                flex: 1 1 auto;
                margin-left: 20rpx;
                height:210rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .name{
                    font-size:28rpx;
                    font-weight:bold;
                    color:rgba(51,51,51,1);
                }
                .tag-box{
                    display: flex;
                    align-items: center;
                    .tag-li + .tag-li{
                        margin-left: 10rpx;
                        font-size:24rpx;
                        font-weight:400;
                        color:rgba(65,218,176,1);
                        border:1px solid rgba(65,218,176,1);
                    }
                    .tag-li{
                        padding: 0 10rpx;
                        font-size:24rpx;
                        font-weight:400;
                        color:rgba(255,81,53,1);
                        border:1px solid rgba(255,81,53,1);
                        border-radius:10rpx 0px 10rpx 0px;
                    }
                }
                .author{
                    font-size:24rpx;
                    font-weight:400;
                    color:rgba(153,153,153,1);
                }
                .btn-box{
                    margin-bottom: 11rpx;
                    display: flex;
                    justify-content: flex-end;
                    .btn.err{
                        background:rgba(199,199,199,1);
                    }
                    .btn{
                        text-align: center;
                        min-width:136rpx;
                        padding: 6rpx 0;
                        background:rgba(43,168,252,1);
                        border-radius:8px;
                        font-size:24rpx;
                        font-weight:400;
                        color:rgba(255,255,255,1);
                    }
                }
            }
        }
    }
</style>